@import './utils/func';
@import './utils/var';

.page-material {
  .g-main{
    background: white;
  }
  .g-slogan {
    img {
      width: 160px;
      opacity: .89;
    }
  }
  .g-right{
    @extend %bgfull;
    background-image: url("/@@/images/material/bg2.jpg");
  }
  .material-con{
    position: absolute; top: 18%; right: $g-right; bottom: 18%; left: $g-left;
    background-image: url("/@@/images/material/main.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .main-img{
      width:100%; height:100%; display:block;
    }
    .main-mu{
      position: absolute; top: 1%; left: 4%;
      width: 52%; height: 98%;

      a{
        box-sizing: border-box;
        float: left;
        width: 11.6%; height: 50%;
        margin-right: 8.4%;
        background: url("target:blank");
      }
    }
    .main-sun{
      float: right;
      width: 40%; height: 100%;
    }
  }
  .modal-con{
    display: none;
    overflow: hidden;
    *zoom: 1;
    width: 520px;
    padding: 48px 36px 32px;

    .mu{
      float: left;
      width: 82px; height: 248px;
      margin-right: 36px;
    }
    .text{
      box-sizing: border-box;
      overflow: auto;
      min-height: 248px;
      font-size: 16px;
      border-top: 1px solid #c69c6d;
      border-bottom: 1px solid #c69c6d;

      h3{
        padding: 32px 0 36px;
      }
    }
  }
}
